<template>
  <div class="border box-shadow bg-white-color flex flex-column">
    <ZSearch
      :search-configs="searchConfigs"
      v-model:search-params="searchParams"
      :searchParams="searchParams"
      @search="getList"
    ></ZSearch>
    <ZOperation :handles="handles"></ZOperation>
    <ZTable
      class="flex-1"
      :table-data="list"
      :table="table"
      :table-columns="tableColumns"
      :operations="operations"
    ></ZTable>
    <ZPagination
      :total="total"
      @current-change="onCurrentChange"
      @size-change="onSizeChange"
    ></ZPagination>
    <ZDialog
      v-model:dialog-visible="userDialogVisible"
      :dialog-title="title"
      @onConfirm="submit"
    >
      <el-form :model="form" size="small">
        <div class="flex">
          <el-form-item label="用户昵称">
            <el-input
              v-model="form.nickName"
              placeholder="Approved by"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属部门" class="ml-10">
            <el-select v-model="form.deptId" placeholder="Activity zone">
              <el-option label="Zone one" value="shanghai"></el-option>
              <el-option label="Zone two" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="Activity zone">
          <el-select v-model="form.deptId" placeholder="Activity zone">
            <el-option label="Zone one" value="shanghai"></el-option>
            <el-option label="Zone two" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </ZDialog>
  </div>
</template>
<script lang="ts" setup name="UsersList">
import { onBeforeMount, reactive, ref } from "vue";
import { Column, Operation } from "../../type/table";
import { getUserList, accountControl } from "../../apis/users/users";
import { User } from "../../type/users";
import { ComponentType, SearchConfig } from "../../type/search";
import { Handle } from "../../type/handle";
import { success } from "../../common/message";
import { ElMessageBox } from "element-plus";
import "element-plus/theme-chalk/el-message-box.css";
import ZPagination from "../../components/common/ZPagination.vue";
import ZOperation from "../../components/common/ZOperation.vue";
import ZDialog from "../../components/common/ZDialog.vue";
interface SearchParams {
  endTime?: string;
  pageNum: number;
  pageSize: number;
  phone?: string;
  startTime?: string;
  status?: number;
  userName?: string;
}

const searchParams: SearchParams = reactive({
  pageNum: 1,
  pageSize: 10,
});

const total = ref(0);

let list = ref<User[]>([]);
const form = reactive({
  avatar: "",
  deptId: 0,
  email: "",
  nickName: "",
  password: "",
  phone: "",
  remark: "",
  sex: 0,
  status: 0,
  userName: "",
});
const handleAccount = (
  val: number,
  user: { userId: number; status: number }
): void => {
  const data = { userId: user.userId, status: val };
  ElMessageBox.confirm(`确定要${val ? "停用" : "启用"}账号吗?`, "提示")
    .then(() => {
      accountControl(data)
        .then(() => {
          success("操作成功!");
          getList();
        })
        .catch(() => {
          user.status = val === 1 ? 0 : 1;
        });
    })
    .catch(() => {
      user.status = val === 1 ? 0 : 1;
    });
};

const title = ref<string>("新增用户");
const userDialogVisible = ref(false);
const addUser = (): void => {
  userDialogVisible.value = true;
};
const submit = (): void => {};

const tableColumns: Array<Column> = [
  {
    prop: "userName",
    lable: "用户名",
  },
  {
    prop: "deptName",
    lable: "部门",
  },
  {
    prop: "nickName",
    lable: "昵称",
  },
  {
    prop: "email",
    lable: "邮箱",
    minWidth: "160px",
  },
  {
    prop: "phone",
    lable: "电话",
    minWidth: "160px",
  },
  {
    prop: "status",
    lable: "状态",
    minWidth: "100",
    switch: true,
    actionHandler: handleAccount,
  },
  {
    prop: "createTime",
    lable: "创建时间",
    dateFormat: "yyyy-MM-dd hh:mm",
    minWidth: "160px",
  },
];

const searchConfigs: SearchConfig[] = [
  {
    type: ComponentType.Input,
    prop: "userName",
    placeholder: "请输入用户名",
  },
  {
    type: ComponentType.Input,
    prop: "phone",
    placeholder: "请输入手机号",
  },
  {
    type: ComponentType.Date,
    prop: "dateTime",
    dateType: "daterange",
    props: ["startTime", "endTime"],
  },
];

const handles: Array<Handle> = [
  {
    text: "新增用户",
    type: "primary",
    icon: "Plus",
    actionHandler: addUser,
  },
];

const table = {
  stripe: true,
  border: true,
};
const editUser = (user: User): void => {
  console.log(user);
};
const resetPassword = (user: User): void => {
  ElMessageBox.prompt("请输入新密码", "重置密码", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputPattern:
      /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
    inputErrorMessage: "新密码",
  })
    .then(({ value }) => {
      console.log(value);
    })
    .catch(() => {});
};

const operations: Array<Operation> = [
  {
    name: "编辑",
    actionHandler: editUser,
  },
  {
    name: "重置密码",
    actionHandler: resetPassword,
  },
];

const onCurrentChange = (val: number) => {
  searchParams.pageNum = val;
};

const onSizeChange = (val: number) => {
  searchParams.pageSize = val;
};

const getList = (): void => {
  getUserList(searchParams).then((res: any) => {
    if (res.list && res.list.length) {
      list.value = res.list;
      total.value = res.totalRows;
    } else {
      list.value = [];
    }
  });
};
onBeforeMount(() => {
  getList();
});
</script>
<style lang="scss" scoped></style>
